import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text, Block } from '@tarojs/components'

import { setGlobalData } from './../../config/global_data'
import './mask.less'

class Mask extends Component {

    constructor(props) {
        super(props)
        this.state = {
            showFlag: true
        }
    }

    componentWillReceiveProps(nextProps) {
        console.log(this.props, nextProps)
    }

    componentDidMount() {
        const { step, cost } = this.props
        this.setState(step, cost)
    }

    componentWillUnmount() {
        setGlobalData("rpCounter", false)
    }

    componentDidShow() { }

    componentDidHide() { }

    jumpToResume(e) {
        this.setState({ showFlag: false })
        Taro.navigateTo({
            url: `/pages/subpackages/my/my-resume/my-resume?sign=1`
        })
    }

    jumpToClose(e) {
        this.setState({ showFlag: false })
        //getApp().globalData.rpCounter = false
    }

    jumpToBack(e) {
        this.setState({ showFlag: false })
        //getApp().globalData.rpCounter = false
        Taro.navigateBack()
    }

    getPhoneNumber(e) {
        let detail = e.detail
        if (!detail.encryptedData || !detail.iv) {
            return
        }
        //领取电话号码待写

        // task.getPhoneTask(detail)
        //     .then(res => {
        //         if (res.__info == "领取成功") {
        //             this.setState({ step: 2 })
        //             this.setState({ cost: res.reward })
        //         } else {
        //             this.setState({ cost: 0.01 })
        //         }
        //     })
        //     .catch(err => {
        //         console.log(err)
        //     })
    }

    stopPageScroll(e) { return false }

    render() {
        let { showFlag, cost, step } = this.state
        return (
            <View className='mask'>
                {
                    showFlag && <View className='mask' onTouchMove={this.stopPageScroll.bind(this)}>
                        {/* <!-- F->S->T --> */}
                        {/* <!-- step: 1->2->3 --> */}
                        <View className='g dis-flex flex-center'>
                            {
                                step === 1 && <Block>
                                    <View className='img imgF vertical flex-middle'>
                                        <Text className='img_text img_text--banner'>{Taro.getStorageSync('name')}
                                          新人随机红包
                                        </Text>
                                        <View className='btnG'>
                                            <Button className='btn btnF' hover-className='hover' open-type='getPhoneNumber' onGetPhoneNumber={this.getPhoneNumber.bind(this)}>立即领取</Button>
                                            <View className='btn btn_decoration'></View>
                                        </View>
                                        <View className='close closeF' onClick={this.jumpToClose.bind(this)}></View>
                                    </View>
                                </Block>
                            }
                            {
                                step === 2 && <Block>
                                    <View className='img imgS vertical flex-middle'>
                                        <Text className='img_text img_text--title'>恭喜你获得</Text>
                                        <View className='priceG'>
                                            <Text className='priceG_title'>{cost}</Text>
                                            <Text className='priceG_sign'>元</Text>
                                        </View>
                                        <Text className='img_text img_text--des'>新人现金红包</Text>
                                        <View className='bthG'>
                                            <Button className='btn btnS' hover-className='hover' onClick={this.jumpToResume.bind(this)}>完善简历翻倍</Button>
                                            <View className='btn btn_decoration'></View>
                                        </View>
                                        <View className='close closeS' onClick={this.jumpToClose.bind(this)}></View>
                                    </View>
                                </Block>
                            }
                            {
                                (step != 1 && step != 2) && <Block>
                                    <View className='img imgT vertical flex-middle'>
                                        <Text className='img_text img_text--title'>翻倍成功</Text>
                                        <View className='priceG'>
                                            <Text className='priceG_title'>{cost}</Text>
                                            <Text className='priceG_sign'>元</Text>
                                        </View>
                                        <Text className='img_text img_text--des'>新人现金红包翻倍</Text>
                                        <View className='btnG vertical flex-middle flex-center'>
                                            <Button className='btn btnT' hover-className='hover' onClick={this.jumpToBack.bind(this)}>返回</Button>
                                            <View className='btn btn_decoration'></View>
                                            <View className='img_dec'></View>
                                        </View>
                                        <View className='close closeT' onClick={this.jumpToClose.bind(this)}></View>
                                    </View>
                                </Block>
                            }
                        </View>
                    </View>
                }

            </View>
        )
    }
}

export default Mask
